<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="店铺名称:">
        <el-input v-model="queryParams.storeName" size="small" placeholder="请输入店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="自" prop="createTimeBegin">
        <el-date-picker v-model="queryParams.createTimeBegin" type="date" value-format="yyyy-MM-dd" size="mini" style="width: 200px" placeholder="选择时间始" clearable />
      </el-form-item>
      <el-form-item label="至" prop="createTimeEnd">
        <el-date-picker v-model="queryParams.createTimeEnd" type="date" value-format="yyyy-MM-dd" size="mini" style="width: 200px" placeholder="选择时间至" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button v-loading="exportLoading" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">

      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">

 <el-table-column label="店铺" width="125" align="center" prop="storeName" />
 <el-table-column label="当前子订单号"  width="175" align="center" prop="name" />
  <el-table-column label="下单时间"  width="125" align="center" prop="province" />
      <el-table-column label="SPU" width="175" align="center" prop="custSpu" />


      <el-table-column label="SKUID" width="125" align="center" prop="city" />
      <el-table-column label="SKU 名称" width="195" align="center" prop="address" />
      <el-table-column label="此次订单价格" width="125" align="center" prop="phone" />
      <el-table-column label="上次订单价格" width="125" align="center" prop="district" />
       <el-table-column label="常规买入价格" width="125" align="center" prop="remark" />

     <el-table-column label="上次子订单号"  width="125" align="center" prop="userId" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />
  </div>
</template>

<script>
import PriceTrackApi from '@/api/order/PriceTrackApi'

export default {
  name: 'StoreList',
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        storeName: null,
        createTimeBegin: null,
        createTimeEnd: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      loading: true,
      exportLoading: false,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
    },

    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return PriceTrackApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },

    handleQuery() {
      this.loading = true
      PriceTrackApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },

    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },

    handleExport() {
      let that = this
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        that.exportLoading = true
        return PriceTrackApi.exportData(that.queryParams)
      }).then(response => {
        that.exportLoading = false
        this.$common.download(response.data)
      }).catch(() => {
        that.exportLoading = false
      })
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
